﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="bootstrap default admin template">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Grid system | Prince Admin Template</title>


        <!-- Start global css -->
        <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
        <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
        <!-- End global css -->

        <!-- Start page plugin css -->
        <!-- End page plugin css -->

        <!-- Start template global css -->
        <link href="../../assets/global/css/components.min.css" type="text/css" rel="stylesheet"/>
        <!-- End template global css -->

        <!-- Start layout css -->
        <link rel="stylesheet" href="../../assets/layouts/layouts_left_icon_menu/left_icon_menu_layout.min.css"/>
        <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

    </head>
    <body class="nav-small">
    <div class="container body">
        <div class="main_container">
            <!-- Start header -->
            <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-home"></i>Dashboard <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="index.html">Dashboard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-window-maximize"></i>Popups <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="sweetalerts.html">Popups</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cogs"></i>Documentation <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="documentation.html">Documentation</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
            <!-- End header -->
            <!-- Start Contain Section -->
            <div class="container-fluid right_color">
                <div class="page-main-header">
                    <!-- Page Title -->
                    <h2 class="page-name-title">Grid system</h2>
                    <!--  Breadcrumb -->
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li class="text-info">Components</li>
                        <li class="active">Grid system</li>
                    </ol>
                </div>

                <div class="contain-section">
                    <div class="contain-inner-section">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Grid options</h2>
                                    <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy
                                        table.</p>
                                </div>
                                <div class="section-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th> Extra small devices
                                                        <small>Phones (&lt;768px)</small>
                                                    </th>
                                                    <th> Small devices
                                                        <small>Tablets (≥768px)</small>
                                                    </th>
                                                    <th> Medium devices
                                                        <small>Desktops (≥992px)</small>
                                                    </th>
                                                    <th> Large devices
                                                        <small>Desktops (≥1200px)</small>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Grid behavior</th>
                                                    <td>Horizontal at all times</td>
                                                    <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Container width</th>
                                                    <td>None (auto)</td>
                                                    <td>750px</td>
                                                    <td>970px</td>
                                                    <td>1170px</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Class prefix</th>
                                                    <td><code>.col-xs-</code></td>
                                                    <td><code>.col-sm-</code></td>
                                                    <td><code>.col-md-</code></td>
                                                    <td><code>.col-lg-</code></td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row"># of columns</th>
                                                    <td colspan="4">12</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Column width</th>
                                                    <td class="text-muted">Auto</td>
                                                    <td>~62px</td>
                                                    <td>~81px</td>
                                                    <td>~97px</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Gutter width</th>
                                                    <td colspan="4">30px (15px on each side of a column)</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Nestable</th>
                                                    <td colspan="4">Yes</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Offsets</th>
                                                    <td colspan="4">Yes</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Column ordering</th>
                                                    <td colspan="4">Yes</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Stacked-to-horizontal</h2>
                                    <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid
                                        system
                                        that starts out stacked on mobile devices and tablet devices (the extra small to small
                                        range) before becoming horizontal on desktop (medium) devices. Place grid columns in any
                                        <code>.row</code>.</p>
                                </div>
                                <div class="section-body">
                                    <div class="show-grid">
                                        <div class="col-md-2">.col-md-2</div>
                                        <div class="col-md-2">.col-md-2</div>
                                        <div class="col-md-2">.col-md-2</div>
                                        <div class="col-md-2">.col-md-2</div>
                                        <div class="col-md-2">.col-md-2</div>
                                        <div class="col-md-2">.col-md-2</div>
                                    </div>
                                    <div class="show-grid">
                                        <div class="col-md-8">.col-md-8</div>
                                        <div class="col-md-4">.col-md-4</div>
                                    </div>
                                    <div class="show-grid">
                                        <div class="col-md-3">.col-md-3</div>
                                        <div class="col-md-3">.col-md-3</div>
                                        <div class="col-md-3">.col-md-3</div>
                                        <div class="col-md-3">.col-md-3</div>
                                    </div>
                                    <div class="show-grid">
                                        <div class="col-md-4">.col-md-4</div>
                                        <div class="col-md-4">.col-md-4</div>
                                        <div class="col-md-4">.col-md-4</div>
                                    </div>
                                    <div class="show-grid">
                                        <div class="col-md-6">.col-md-6</div>
                                        <div class="col-md-6">.col-md-6</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Mobile and desktop</h2>
                                    <p>Don't want your columns to simply stack in smaller devices? Use the extra small and
                                        medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to
                                        your columns. See the
                                        example below for a better idea of how it all works.
                                    </p>
                                </div>
                                <div class="section-body">
                                    <div class="show-grid">

                                        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
                                        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

                                        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                                        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                                        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

                                        <div class="col-xs-6">.col-xs-6</div>
                                        <div class="col-xs-6">.col-xs-6</div>

                                        <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
                                        <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
                                        <div class="col-xs-12 col-md-6">.col-xs-12 .col-md-6</div>

                                    </div>

                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Column wrapping</h2>
                                    <p>If more than 12 columns are placed within a single row, each group of extra columns will,
                                        as one unit, wrap onto a new line.
                                    </p>
                                </div>
                                <div class="section-body">
                                    <div class="show-grid">

                                        <div class="col-xs-9">.col-xs-9</div>
                                        <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets
                                            wrapped onto a new line as one contiguous unit.
                                        </div>
                                        <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>

                                    </div>

                                </div>
                               
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Responsive column resets</h2>
                                    <p>With the four tiers of grids available you're bound to run into
                                        issues where, at certain breakpoints, your columns don't clear
                                        quite right as one is taller than the other. To fix that, use
                                        a combination of a <code>.clearfix</code> and our responsive
                                        utidivty classes.
                                    </p>
                                </div>
                                <div class="section-body">
                                    <div class="show-grid">
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="grid-col">.col-xs-6 .col-sm-3
                                                <br> Resize your viewport or check it out on your phone for
                                                an example.
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="grid-col">.col-xs-6 .col-sm-3</div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="grid-col">.col-xs-6 .col-sm-3</div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="grid-col">.col-xs-6 .col-sm-3</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Offsetting columns</h2>
                                    <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes
                                        increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code>
                                        moves <code>.col-md-4</code> over four columns.</p>
                                </div>
                                <div class="section-body">
                                    <div class="show-grid">

                                        <div class="col-md-4">.col-md-4</div>
                                        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

                                        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                                        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

                                        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

                                    </div>
                                </div>
                           </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Nesting columns</h2>
                                    <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
                                </div>
                                <div class="section-body">
                                    <div class="show-grid">

                                        <div class="col-sm-9">
                                            Level 1: .col-sm-9
                                            <div class="row">
                                                <div class="col-xs-8 col-sm-6">
                                                    Level 2: .col-xs-8 .col-sm-6
                                                </div>
                                                <div class="col-xs-4 col-sm-6">
                                                    Level 2: .col-xs-4 .col-sm-6
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="section-header">
                                    <h2>Column ordering</h2>
                                    <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
                                </div>
                                <div class="section-body last-body-section">
                                    <div class="show-grid">

                                        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
                                        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
        </div>
    </div>

        <!-- Start core js -->
        <script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
        <script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
        <script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
        <script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
        <!-- Start core javascript -->

        <!-- Start global js -->
        <script src="../../assets/global/js/left-icon-menu.min.js"></script>
        <!-- End global js -->

    </body>
</html>